<template>
  <div v-for="item of svgIcons" :key="item">
    <svg-icon :name="item" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  const svgFileReg = /(?<=(svg\/)).*?(?=(.svg))/;

  /** 获取所有`svg`名称 */
  function getSvgNames() {
    const svgInfo = import.meta.globEager('./svg/login.svg');
    console.log(svgInfo);
    const svgs = Object.keys(svgInfo);
    const names = svgs.map((value) => {
      const res = value.match(svgFileReg)![0];
      return res;
    });
    return names;
  }

  export default defineComponent({
    name: 'Icons',
    setup() {
      return {
        svgIcons: getSvgNames(),
      };
    },
  });
</script>
